<template>
    <div>
        <div class="cardst" :style="'background:' + color[parentIndex] + ';'" @click="shebei(cardTit[parentIndex])">
            <div class="px-3 pt-3  pb-2 pt-0">
                <div>
                    <h6 class="mb-3 fs-12 text-fixed-white">{{ cardTit[parentIndex] }}</h6>
                </div>
                <div class="pb-0 mt-0">
                    <div class="d-flex">
                        <h4 class="fs-20 fw-bold mb-1 text-fixed-white">{{ allEqui[parentIndex] }}</h4>
                        <span class="float-end my-auto ms-auto" style="font-size: 15px; font-weight: 100;">
                            <i class="el-icon-s-help"></i>
                            <span class="text-fixed-white op-7">{{ bCard }}</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getWork } from "@/api/table";
export default ({
    data() {
        return {
            color: [
                'linear-gradient(to left,#ad6598 0,#7e1671 100%)!important',
                'linear-gradient(to left,rgb(1 98 232 / 50%) 0,rgb(1,98,232) 100%)!important',
                'linear-gradient(45deg, #41b349, rgb(162 236 148)) !important',
                'linear-gradient(to left,#f0a1a8 0,#de1c31 100%)!important',
                'linear-gradient(to left, rgb(249 221 97) 0px, rgb(239 161 18) 100%) !important',
                'linear-gradient(to left, rgb(185 185 185), rgb(125 125 125)) !important',
            ],
            cardTit: [
                '全部',
                '未启用',
                '正常',
                '报警',
                '故障',
                '离线',
            ],
            cardList: [
                '100',
                '80',
                '10',
                '10',
                '5',
                '5',
            ]
        }
    },
    computed: {
        bCard: function () {
            let cardIndex = this.parentIndex;
            let cardL = ((this.allEqui[cardIndex] / this.allEqui[0]) * 100).toFixed(2) + '%'
            return cardL
        }
    },
    props: {
        parentIndex: {
            type: Number,
            required: true,
        },
        allEqui: {
            type: Array,
            required: true,
        }
    },
    methods: {
        shebei(data) {
            // options: [{
            //     value: '',
            //     label: '全部'
            // }, {
            //     value: '0',
            //     label: '未启用'
            // }, {
            //     value: '1',
            //     label: '正常'
            // }, {
            //     value: '2',
            //     label: '离线'
            // }, {
            //     value: '3',
            //     label: '故障'
            // }, {
            //     value: '4',
            //     label: '报警'
            // },],
            // console.log(data);
            let type = ''
            if (data == '全部') {
                type = ''
            }
            if (data == '未启用') {
                type = '0'
            }
            if (data == '正常') {
                type = '1'
            }
            if (data == '离线') {
                type = '2'
            }
            if (data == '故障') {
                type = '3'
            }
            if (data == '报警') {
                type = '4'
            }
            this.$router.push({ name: 'Equipment', params: { id: type } });
        }
    }
})
</script>

<style lang="scss" scoped>
.cardst {
    height: 90px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: -5px 5px 10px 0 #dadee8;
    color: #ffffff;
}
</style>